﻿@model IEnumerable<MvcShopping.Models.Product>
@{
    var ajaxOption = new AjaxOptions()
    {
        OnSuccess = "AddToCartSuccess",
        OnFailure = "AddToCartFailure",
        HttpMethod = "Post"
    };
}
@section scripts {

    @Scripts.Render("~/bundles/jqueryval")
    <script>
        var M = {}
        function AddToCartSuccess() {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/right.png',
                'animateType': 'scale',
                'content': '加入购物车成功',
                'closeTime': 2000,
            })
        }
        function AddToCartFailure(xhr) {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/error.png',
                'animateType': 'scale',
                'content': '加入购物车失败',
                'closeTime': 2000,
            })
            //alert('加入购物车失败 (HTTP 状态码: ' + xhr.status + ')');
        }
    </script>
}
<link href="~/Content/alert.css" rel="stylesheet" />
<script src="~/Scripts/alert.js"></script>
<div id="productlist">
    <h3 style="display:inline-block;padding-left:15px;">@Html.DisplayNameFor(model => model.ToList()[0])</h3>

    <p style="display:inline-block;margin-left:30px;">你正在查看【@Model.First().productCategory.Name】分类的商品：</p>
    <a href="javascript:;" id="inlistA" style="display:inline-block;margin-right:15px;"><span id="inlist" class="glyphicon glyphicon-th-list"></span>块式</a>
    <a href="javascript:;" id="inblockA"><span id="inblock" class="glyphicon glyphicon-th-large"></span>表格</a>
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                   
                    <th>@Html.DisplayNameFor(model => model.Name)</th>
                    <th>@Html.DisplayNameFor(model => model.Description)</th>
                    <th>@Html.DisplayNameFor(model => model.Price)</th>
                    <th></th>
                </tr>
            </thead>
            @foreach (var item in Model)
            {
                <tr>
                    
                    <td>@Html.ActionLink(item.Name, "ProductDetail", new { id = item.Id })</td>
                    <td>@Html.DisplayFor(modelItem => item.Description)</td>
                    <td>@Html.DisplayFor(modelItem => item.Price)</td>
                    <td>@Ajax.ActionLink("加入购物车", "AddToCart", "Cart", new { ProductId = item.Id }, ajaxOption)</td>
                </tr>
            }
        </table>
        <div id="showDiv" style="display:none">
            <ul class="list-group col-md-12" style="padding-top:20px;">
                @{
                    int i = 0;
                }
                @foreach (var item in Model)
            {
                i++;
                if (i > 8)
                {
                    break;
                }
                <li class="col-md-4 list-group-item hotshop" style="border:0;height:280px;margin-bottom:5px;">
                    <div>
                        <a href="javascript:;" class="thumbnail">
                            <img alt="" src="~/@item.Url" />
                        </a>
                        <p class="row">
                        <p class="col-xs-4 text-left" style="padding-left:0;margin-left:0">
                            @Html.ActionLink(item.Name, "ProductDetail", new { id = item.Id }, new { color = "black", @class = "black" })
                        </p>

                        <p class="col-xs-4 text-center">
                            @Ajax.ActionLink("加购物车", "AddToCart", "Cart", new { ProductId = item.Id }, ajaxOption, new { color = "#C2C3C9", @class = "grey" })
                        </p>

                        </p>
                        <p class="text-right col-xs-4 text-danger">
                            $ @Html.DisplayFor(modelItem => item.Price)元
                        </p>
                    </div>
                </li>
                }
            </ul>
        </div>
    </div>
</div>
<script>
        $("#inblockA").click(function () {
            $('table').show();
            $("#showDiv").hide();
        });
        $("#inlistA").click(function () {
            $('table').hide();
            $("#showDiv").show();
        })
</script>